<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入bootstrap相关资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入该页面的css -->
    <link rel="stylesheet" href="../public/css/login.css"/>
</head>
<body>
<!-- 顶部导航栏 0 -->
<nav id="navbar" class="navbar navbar-light bg-light px-3">
    <a class="navbar-brand" href="./index.html">Blog</a>
    <ul class="nav nav-pills">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                <i class="bi bi-list"></i>
            </a>
            <ul class="dropdown-menu">
                <li class="login-show-item"><a class="dropdown-item" href="./login.html">登录</a></li>
                <li class="login-show-item"><a class="dropdown-item" href="./register.html">注册</a></li>
            </ul>
        </li>
    </ul>
</nav>
<!-- 顶部导航栏 1 -->
<!-- 中间表单 0 -->
<div id="app" class="shadow-lg p-3 mb-5 bg-white rounded">
    <!-- 圆形头像 -->
    <div id="touxiang">
        <img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg">
    </div>
    <!-- 登录表单 0 -->
    <form id="login-form">
        <!-- 账号输入框 -->
        <div class="input-group flex-nowrap username-input" style="margin-top: 80px;">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="bi bi-person"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="请输入账号" name="username" id="username">
        </div>
        <!-- 密码输入框 -->
        <div class="input-group flex-nowrap username-input">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="bi bi-lock"></i></span>
            </div>
            <input type="password" class="form-control" placeholder="请输入密码" name="password" id="password">
        </div>
        <!-- 登录按钮 -->
        <div class="input-group flex-nowrap username-input">
            <span id="tip-text">如果没有账户，请前往<a href="./register.html">注册</a></span>
            <input type="button" value="登录" class="btn btn-primary" id="login-button"/>
        </div>
    </form>
    <!-- 登录表单 1 -->
</div>
<!-- 中间表单 1 -->
<!-- 提示组件 0 -->
<div class="position-fixed top-0 start-50 translate-middle-x" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">提示</strong>
            <small>刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            <p id="toast-body"></p>
        </div>
    </div>
</div>
<!-- 提示组件 1 -->
</body>
<script type="text/javascript">
    // 提交登录信息
    document.getElementById('login-button').onclick = function () {
        axios.post('/login', {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value
        }, {
            validateStatus: function (status) {
                // 400状态码表示请求参数错误，也让resolve处理；500状态码表示服务端内部错误，也让resolve处理
                return (status >= 200 && status < 300) || (status === 400) || (status === 500);
            }
        }).then(function (response) {
            // 对响应回来的数据使用Toasts提示框进行显示
            var totalLiveExample = document.getElementById("liveToast");
            var toast = new bootstrap.Toast(totalLiveExample);
            var toastBody = document.getElementById("toast-body");
            if (response.status === 200) {
                toastBody.innerHTML = "<span class='text-primary'>" + response.data.msg + "将在3秒后自动前往首页！" + "</span><br/>立即前往<a href='./index.html'>首页</a>";
                // 注册成功则清除表单数据并且在10秒后重定向到登录页面
                document.getElementById("username").value = null;
                document.getElementById("password").value = null;
                setTimeout(function () {
                    window.location.href = './index.html';
                }, 3 * 1000);
            } else if (response.status === 400) {
                toastBody.innerHTML = "<span class='text-warning'>" + response.data.msg + "</span>";
            } else if (response.status === 500) {
                toastBody.innerHTML = "<span class='text-danger'>" + response.data.msg + "</span>";
            }
            toast.show();
            console.log(response.data);
        }).catch(function (reason) {
            console.log(reason);
        });
    }
</script>
</html>
